<template>
		
		<el-row>
			<el-col :span="4">
				<!--在home页面中点击链接，要在home页面的右边显示相应的页面-->
				<h6>Hcmall后台管理</h6>
				<!-- <a href="#/home/prodlist">产品管理</a><br/>
				<a href="#/home/prodcategory">分类管理</a><br/> -->
				 <el-menu
				        default-active="2"
						router
				      >
				        <el-sub-menu index="1">
							  <template #title>
								<el-icon><location /></el-icon>
								<span>产品管理</span>
							  </template>
						  
				            <el-menu-item index="/home/prodlist">
								产品列表
							</el-menu-item>
							
				            <el-menu-item index="/home/prodcategory">
								分类管理
							</el-menu-item>
				            <el-menu-item index="1-3">分组管理</el-menu-item>
				        </el-sub-menu>
						
						<el-sub-menu index="2">
							  <template #title>
								<el-icon><location /></el-icon>
								<span>门店管理</span>	
							  </template>
						  
						    <el-menu-item index="1-1">公告管理</el-menu-item>
						    <el-menu-item index="1-2">自提点管理</el-menu-item>
						    <el-menu-item index="1-3">分组管理</el-menu-item>
						</el-sub-menu>
						<el-sub-menu index="3">
							  <template #title>
								<el-icon><location /></el-icon>
								<span>系统管理</span>	
							  </template>
						  
						    <el-menu-item index="/home/sysarea">地址管理</el-menu-item>
							
							<el-menu-item index="/home/sysuser">
								系统管理员
							  </el-menu-item>
							<el-menu-item index="/home/role">
								角色列表
							  </el-menu-item>
						</el-sub-menu>
						
				</el-menu>
				
				
				
				<hr/>
				
				
				<el-menu
				        default-active="2"
						router
				      >
				        <el-sub-menu  v-for="(menu,index) in menuTreeData" :key="menu.menu_id" :index="menu.menu_id">
							  <template #title>
								<el-icon><location /></el-icon>
								<span>{{menu.name}}</span>
							  </template>
							  <el-menu-item :index="child.url" v-for="(child,index) in menu.children" :key="child.menu_id">
								  {{child.name}}
							  </el-menu-item>
						  
				        
				        </el-sub-menu>
						
						
						
				</el-menu>
				
				
			</el-col>
			<el-col :span="20">
				<el-row justify="space-between">
					<el-col :span="3">展开与收缩</el-col>
					<el-col :span="4" >欢迎:{{userInfoStore.username}} 
						<el-button link  @click="loginout">注销</el-button>
					</el-col>
				</el-row>
				<div style="padding: 20px;">
					
					<router-view></router-view>
				</div>
			</el-col>
		</el-row>
		
</template>

<script setup>
	import {ref,onMounted,getCurrentInstance} from 'vue';
	import {useloginUserStore} from '../store/loginUserInfo.js'
	import {useRouter,useRoute} from 'vue-router'
	//页面加载完毕后，根据登录用户的ID，获得他能够访问的菜单
	
	let router = useRouter();
	
	let userInfoStore = useloginUserStore();
	let loginout = ()=>{
		userInfoStore.$reset();//重置store中的数据
		router.replace("/login")
	}
	
	//useRouter代表全局的路由信息(全局的路由配置信息，及路由跳转的函数 push replace都这个对象中)
	
	//useRoute代表当前页面的路由信息
	console.log("useRouter对象的信息为:",useRouter())
	console.log("useRoute对象的信息为:",useRoute())
	
	//let jsonStr =   //window.localStorage.getItem("localstorage")
	//JSON.parse(jsonStr)
	
	let userId  =userInfoStore.user_id;//从store中获取登录用户的ID //window.sessionStorage.getItem("sessionuserId");// useRoute().query.userId;//拿到地址址栏中传递过来的用户编号 /home?userId=11
	let  {proxy} = getCurrentInstance()
	
	let menuTreeData = ref([]);//服务端返回的菜单树
	let menuURLArray = ref([]);
	
	onMounted(()=>{
		//发异步请求
		if (userId){
			proxy.$axios.get("/SysMenuController/queryDataByLoginUserId",{params:{user_id:userId}})
				.then((serverData)=>{
					console.log("服务端返回的数据为:",serverData.data.data);
					if (serverData.data.code==0){
						menuTreeData.value = serverData.data.data;
						for(let i=0;i<serverData.data.data.length;i++){
							let obj  =serverData.data.data[i];
							console.log(obj)
							if (obj.url){
								menuURLArray.value.push(obj.url);
							}
							for(let k=0;k<obj.children.length;k++){
								let child = obj.children[k];
								if (child.url){
									menuURLArray.value.push(child.url);
								}
							}
						}
						userInfoStore.urlList= menuURLArray.value;
					}
				//	console.log("允许访问的路由地址列表为:",menuURLArray.value);
				})
		}
		
	})
	
	import {
	  Document,
	  Menu as IconMenu,
	  Location,
	  Setting,
	} from '@element-plus/icons-vue'

</script>

<style>
</style>